<!-- 缴费记录详情 -->
<template>
  <div class="drawer-modular">
    <el-drawer title="标题" :visible.sync="drawerVisible" :with-header="false" :size="size" :before-close="close"
      :modal="true">
      <div class="drawer-title">{{ drawerTitle }}</div>
      <div class="drawer-content">
        <div style="width: 500px">
          <el-scrollbar v-if="item" wrap-class="scrollbar-wrapper">
            <div class="details-box">
              <div v-for="(row, index) in info" :key="index" class="aloneInfo">
                <div v-if="row.isShow(item)">
                  <div v-if="row.type === 'text'" class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend">
                      <p style="width: 110px;white-space: normal;">{{ row.label }}</p>
                    </div>
                    <div v-if="typeof row.key === 'string'" class="el-input__inner">{{ item[row.key] }}</div>
                    <div v-else class="el-input__inner">{{ row.key(item) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>

        <div v-if="item" class="left_div">
          <div class="rawListTit">费用明细</div>
          <el-table :data="item.expenseDetailList.filter(row => row.num !== 0)"
            style="border-radius: 4px 4px 4px 4px;"
            :show-summary="true"
            :summary-method="getSummaries">
            <el-table-column label="费用类型" prop="name" align="center" min-width="120" :show-overflow-tooltip="true" />
            <el-table-column label="收费标准" prop="expenseMoney" align="center" min-width="120" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                ¥{{ scope.row.expenseMoney }}元/{{ scope.row.expenseUnits }}
              </template>
            </el-table-column>
            <el-table-column label="次数" prop="num" align="center" min-width="120" :show-overflow-tooltip="true" />
            <el-table-column label="小计" prop="subtotal" align="center" min-width="120" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span style="color: #ff4949;">¥{{ scope.row.subtotal }}元</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="drawer-btn">
        <el-button @click="close">返回</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getPayRecord } from "@/api/yongcanjiaofei/jiaofeijilu";

export default {
  name: "PayRecordDetails",
  props: {
    size: {
      type: String,
      default: "calc(100vw - 200px)"
    }
  },
  data() {
    return {
      drawerVisible: false,
      drawerTitle: "缴费详情",
      item: null,
      info: []
    };
  },
  created() {
    this.info = [
      {
        isShow: () => true,
        type: "text",
        label: "编号",
        key: "merchantOrderNo"
      },
      //申请人
      {
        isShow: () => true,
        type: "text",
        label: "申请人",
        key: "fullName"
      },
      //申请人部门
      {
        isShow: () => true,
        type: "text",
        label: "申请部门",
        key: "deptName"
      },
      //申请人号码
      {
        isShow: () => true,
        type: "text",
        label: "申请人号码",
        key: "applyPhone"
      },
      //用餐人
      {
        isShow: () => true,
        type: "text",
        label: "用餐人",
        key: "diner"
      },
      //用餐人单位
      {
        isShow: () => true,
        type: "text",
        label: "单位名称",
        key: "unitName"
      },
      //用餐人号码
      {
        isShow: () => true,
        type: "text",
        label: "用餐人号码",
        key: "phone"
      },
      {
        isShow: () => true,
        type: "text",
        label: "收款单位",
        key: "payee"
      },
      {
        isShow: () => true,
        type: "text",
        label: "用餐地点",
        key: "canteenName"
      },
      {
        isShow: () => true,
        type: "text",
        label: "用餐开始时间",
        key: "diningStartTime"
      },
      {
        isShow: () => true,
        type: "text",
        label: "用餐结束时间",
        key: "diningEndTime"
      },
      {
        isShow: () => true,
        type: "text",
        label: "付款金额",
        key: item => `¥${item.totalAmount}元`
      },
      {
        isShow: () => true,
        type: "text",
        label: "付款状态",
        key: item => {
          const statusMap = {
            '0': '待支付',
            '1': '已支付',
            '2': '已取消'
          };
          return statusMap[item.payStatus] || '-';
        }
      },
      {
        isShow: item => item.payStatus === '1',
        type: "text",
        label: "付款时间",
        key: "payTime"
      },
      {
        isShow: () => true,
        type: "text",
        label: "创建时间",
        key: "createTime"
      },
      {
        isShow: () => true,
        type: "text",
        label: "备注",
        key: "remark"
      }
    ];
  },
  methods: {
    show(row) {
      this.drawerVisible = true;
      getPayRecord(row.id).then(response => {
        if (response.code === 200) {
          this.item = response.data;
          if (this.item.payStatus == '1') {
            this.drawerTitle =row.fullName + "到" + row.canteenName + "用餐缴费证明";
          }else{
            this.drawerTitle ='缴费详情';
          }
        }
      });
    },
    close() {
      this.drawerVisible = false;
      this.item = null;
      //返回要刷新列表
      this.$emit('refresh');
    },
    getSummaries() {
      const sums = ['合计金额', '', '', `¥${this.item.totalAmount}元`];
      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/drawerModules.scss";

.drawer-content {
  display: flex;

  .left_div {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    margin-right: 30px;
    border: 1px solid #dfe6ec;
    border-radius: 4px 4px 4px 4px;

    /deep/ .el-table__footer-wrapper {
      td {
        background-color: #f8f8f8;
        &:last-child {
          color: #ff4949;
        }
      }
    }
  }

  .rawListTit {
    font-size: 15px;
    font-weight: 500;
    color: #666;
    padding: 14px 20px;
    border-radius: 4px 4px 0 0;
    background-color: #f8f8f8;
    border-bottom: none;
    margin-bottom: 10px;
  }
}
</style> 